<script setup>
import { ref, reactive, watch } from 'vue'
const question = ref('')
const answer = reactive({
    answer: "",
    images: "",
})

watch(question, async (newQuestion) => {
    if (newQuestion.indexOf('?') > -1) {
        answer.answer = 'Thinking ....'
        answer.images = ''
        try {
            const res = await fetch('https://yesno.wtf/api')
            const json = (await res.json())
            answer.answer = json.answer
            answer.images = json.image
        } catch (error) {
            answer.answer = 'Error! Could not reach the API. ' + error
        }
    }
})
</script>

<template>
    <p>
        Ask a question: 
        <input v-model="question" />
    </p>
    <p>{{ answer.answer }}</p>
    <p><img :src="answer.images" /></p>
</template>